<template>
  <view class="container">
    <!-- 设备统计卡片区域 -->
    <view class="stats-container">
      <view class="stats-card stats-blue">
        <view class="stats-row-1">
          <view class="stats-icon">
            <uni-icons type="home" size="16" color="#ffffff"></uni-icons>
          </view>
          <text class="stats-title">设备总数</text>
          <view class="stats-trend">
            <uni-icons type="arrowup" size="10" color="#ffffff"></uni-icons>
            <text class="trend-text">+2</text>
          </view>
        </view>
        <view class="stats-row-2">
          <text class="stats-value">164</text>
          <text class="stats-unit">台</text>
        </view>
      </view>

      <view class="stats-card stats-green">
        <view class="stats-row-1">
          <view class="stats-icon">
            <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
          </view>
          <text class="stats-title">在线设备</text>
          <text class="stats-percent">86.6%</text>
        </view>
        <view class="stats-row-2">
          <text class="stats-value">142</text>
          <text class="stats-unit">台</text>
        </view>
      </view>

      <view class="stats-card stats-orange">
        <view class="stats-row-1">
          <view class="stats-icon">
            <uni-icons type="info" size="16" color="#ffffff"></uni-icons>
          </view>
          <text class="stats-title">故障设备</text>
          <view class="stats-trend">
            <uni-icons type="arrowdown" size="10" color="#ffffff"></uni-icons>
            <text class="trend-text">-3</text>
          </view>
        </view>
        <view class="stats-row-2">
          <text class="stats-value">17</text>
          <text class="stats-unit">台</text>
        </view>
      </view>

      <view class="stats-card stats-purple">
        <view class="stats-row-1">
          <view class="stats-icon">
            <uni-icons type="gear" size="16" color="#ffffff"></uni-icons>
          </view>
          <text class="stats-title">离线设备</text>
          <text class="stats-status">需清理</text>
        </view>
        <view class="stats-row-2">
          <text class="stats-value">14</text>
          <text class="stats-unit">台</text>
        </view>
      </view>
    </view>

    <!-- 筛选按钮区域 -->
    <view class="filter-container">
      <view class="filter-btn" :class="{ active: activeFilter === 'all' }" @tap="setFilter('all')">
        <text class="filter-text">全部 (164)</text>
      </view>
      <view class="filter-btn" :class="{ active: activeFilter === 'normal' }" @tap="setFilter('normal')">
        <text class="filter-text">正常 (142)</text>
      </view>
      <view class="filter-btn" :class="{ active: activeFilter === 'fault' }" @tap="setFilter('fault')">
        <text class="filter-text">故障 (3)</text>
      </view>
      <view class="filter-btn" :class="{ active: activeFilter === 'offline' }" @tap="setFilter('offline')">
        <text class="filter-text">离线 (5)</text>
      </view>
    </view>

    <!-- 视图切换和搜索区域 -->
    <view class="toolbar">
      <view class="view-toggle">
        <view class="toggle-btn" :class="{ active: viewMode === 'list' }" @tap="setViewMode('list')">
          <uni-icons type="list" size="16"></uni-icons>
          <text class="toggle-text">列表</text>
        </view>
        <view class="toggle-btn" :class="{ active: viewMode === 'map' }" @tap="setViewMode('map')">
          <uni-icons type="location" size="16"></uni-icons>
          <text class="toggle-text">地图</text>
        </view>
      </view>
      <view class="search-container">
        <uni-icons type="search" size="16" class="search-icon"></uni-icons>
        <input class="search-input" placeholder="搜索设备编号或位置" v-model="searchKeyword" @input="onSearch" />
      </view>
    </view>

    <!-- 设备列表 -->
    <view class="device-list" v-if="viewMode === 'list'">
      <view class="device-item" v-for="device in filteredDevices" :key="device.id" @tap="viewDeviceDetail(device)">
        <view class="device-status" :class="'status-' + device.status"></view>
        <view class="device-info">
          <view class="device-header">
            <text class="device-name">{{ device.name }}</text>
            <text class="device-status-text" :class="'text-' + device.status">{{ getStatusText(device.status) }}</text>
          </view>
          <view class="device-location">
            <uni-icons type="location" size="12" class="location-icon"></uni-icons>
            <text class="location-text">{{ device.location }}</text>
          </view>
          <view class="device-details">
            <text class="device-code">{{ device.code }}</text>
          </view>
          <view class="device-meta">
            <text class="meta-text">最后更新: {{ device.lastUpdate }}</text>
            <text class="meta-text">容量: {{ device.capacity }}</text>
          </view>
        </view>
        <view class="device-actions">
          <uni-icons type="more" size="20" class="more-icon"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 地图视图占位 -->
    <view class="map-view" v-if="viewMode === 'map'">
      <view class="map-placeholder">
        <uni-icons type="location" size="48" class="map-icon"></uni-icons>
        <text class="map-text">地图视图开发中...</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeFilter: 'all',
        viewMode: 'list',
        searchKeyword: '',
        devices: [
          {
            id: 1,
            name: '万达广场 A 区回收箱',
            location: '万达广场 A 区 1 楼',
            code: 'RB001',
            status: 'normal',
            lastUpdate: '2 分钟前',
            capacity: '45%'
          },
          {
            id: 2,
            name: '银泰城 B1 层回收箱',
            location: '银泰城 B1 层',
            code: 'RB002',
            status: 'warning',
            lastUpdate: '5 分钟前',
            capacity: '95%'
          },
          {
            id: 3,
            name: '华润万象超市回收箱',
            location: '华润万象超市入口',
            code: 'RB003',
            status: 'fault',
            lastUpdate: '1 小时前',
            capacity: '0%'
          },
          {
            id: 4,
            name: '科技园 C 区回收箱',
            location: '科技园 C 区办公楼',
            code: 'RB004',
            status: 'normal',
            lastUpdate: '3 分钟前',
            capacity: '67%'
          },
          {
            id: 5,
            name: '东区购物中心回收箱',
            location: '东区购物中心 2 楼',
            code: 'RB005',
            status: 'offline',
            lastUpdate: '2 小时前',
            capacity: '未知'
          }
        ]
      }
    },
    computed: {
      filteredDevices() {
        let devices = this.devices;
        
        // 根据筛选条件过滤
        if (this.activeFilter !== 'all') {
          devices = devices.filter(device => device.status === this.activeFilter);
        }
        
        // 根据搜索关键词过滤
        if (this.searchKeyword) {
          devices = devices.filter(device => 
            device.name.includes(this.searchKeyword) ||
            device.location.includes(this.searchKeyword) ||
            device.code.includes(this.searchKeyword)
          );
        }
        
        return devices;
      }
    },
    onLoad() {
      
    },
    methods: {
      setFilter(filter) {
        this.activeFilter = filter;
      },
      setViewMode(mode) {
        this.viewMode = mode;
      },
      onSearch() {
        // 搜索逻辑已在computed中处理
      },
      getStatusText(status) {
        const statusMap = {
          'normal': '正常',
          'warning': '需清理',
          'fault': '故障',
          'offline': '离线'
        };
        return statusMap[status] || '未知';
      },
      viewDeviceDetail(device) {
        uni.navigateTo({
          url: `/pages/device/detail?deviceId=${device.id}`
        });
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 60px;
  }

  /* 设备统计卡片区域 */
  .stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }

  .stats-card {
    padding: 8px;
    border-radius: 12px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 50px;
  }

  .stats-blue {
    background: linear-gradient(135deg, #4A90E2, #357ABD);
  }

  .stats-green {
    background: linear-gradient(135deg, #1AAD19, #16A085);
  }

  .stats-orange {
    background: linear-gradient(135deg, #FF8C42, #E67E22);
  }

  .stats-purple {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
  }

  .stats-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .stats-row-2 {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .stats-icon {
    margin-right: 8px;
  }

  .stats-title {
    font-size: 11px;
    opacity: 0.8;
    flex: 1;
  }

  .stats-value {
    font-size: 18px;
    font-weight: bold;
  }

  .stats-unit {
    font-size: 10px;
    opacity: 0.8;
  }

  .stats-trend {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .stats-percent {
    font-size: 12px;
    font-weight: bold;
  }

  .stats-status {
    font-size: 11px;
    opacity: 0.8;
  }

  .trend-text {
    font-size: 11px;
  }

  /* 筛选按钮区域 */
  .filter-container {
    display: flex;
    padding: 0 16px 16px;
    gap: 8px;
  }

  .filter-btn {
    flex: 1;
    padding: 8px 12px;
    background-color: #ffffff;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
  }

  .filter-btn.active {
    background-color: #1AAD19;
    border-color: #1AAD19;
  }

  .filter-text {
    font-size: 14px;
    color: #666666;
  }

  .filter-btn.active .filter-text {
    color: #ffffff;
  }

  /* 工具栏区域 */
  .toolbar {
    display: flex;
    align-items: center;
    padding: 0 16px 16px;
    gap: 12px;
  }

  .view-toggle {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #e0e0e0;
  }

  .toggle-btn {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    gap: 4px;
  }

  .toggle-btn.active {
    background-color: #f0f0f0;
  }

  .toggle-text {
    font-size: 14px;
    color: #666666;
  }

  .search-container {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
  }

  .search-icon {
    color: #999999;
    margin-right: 8px;
  }

  .search-input {
    flex: 1;
    font-size: 14px;
    color: #333333;
  }

  /* 设备列表 */
  .device-list {
    padding: 0 16px;
  }

  .device-item {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
  }

  .device-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 6px;
  }

  .status-normal {
    background-color: #52C41A;
  }

  .status-warning {
    background-color: #FAAD14;
  }

  .status-fault {
    background-color: #F5222D;
  }

  .status-offline {
    background-color: #8C8C8C;
  }

  .device-info {
    flex: 1;
  }

  .device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .device-name {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

  .device-status-text {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .text-normal {
    background-color: #F6FFED;
    color: #52C41A;
  }

  .text-warning {
    background-color: #FFFBE6;
    color: #FAAD14;
  }

  .text-fault {
    background-color: #FFF2F0;
    color: #F5222D;
  }

  .text-offline {
    background-color: #F5F5F5;
    color: #8C8C8C;
  }

  .device-location {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .location-icon {
    color: #999999;
    margin-right: 4px;
  }

  .location-text {
    font-size: 14px;
    color: #666666;
  }

  .device-details {
    margin-bottom: 8px;
  }

  .device-code {
    font-size: 14px;
    color: #333333;
    font-family: monospace;
  }

  .device-meta {
    display: flex;
    justify-content: space-between;
  }

  .meta-text {
    font-size: 12px;
    color: #999999;
  }

  .device-actions {
    padding: 4px;
  }

  .more-icon {
    color: #999999;
  }

  /* 地图视图 */
  .map-view {
    padding: 16px;
  }

  .map-placeholder {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
  }

  .map-icon {
    color: #cccccc;
    margin-bottom: 16px;
  }

  .map-text {
    font-size: 16px;
    color: #999999;
  }
</style>